<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/9.2.4/ol.min.css"
    integrity="sha512-bc9nJM5uKHN+wK7rtqMnzlGicwJBWR11SIDFJlYBe5fVOwjHGtXX8KMyYZ4sMgSL0CoUjo4GYgIBucOtqX/RUQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <title>绘制指定半径的圆</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body,
    #app {
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
    }

    #map1,
    #map2,
    #map3,
    #map4 {
      width: 50vw;
      height: 50vh;
      position: relative;
      border: 1px solid deeppink;
    }

    #map1,
    #map3 {
      border-right: none;
    }

    #map1,
    #map2 {
      border-bottom: none;
    }

    .map {
      height: 100%;
      width: 100%;
    }

    button {
      font-size: 18px;
      border: none;
      padding: 12px 20px;
      border-radius: 4px;
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
      cursor: pointer;
      border: 1px solid #dcdfe6;
      margin-bottom: 5px;
      position: absolute;
      top: 0;
      right: 0;
    }

    .text {
      position: absolute;
      right: 5px;
      bottom: 5px;
      border-radius: 4px;
      border: 1px solid #ebeef5;
      background-color: #fff;
      overflow: hidden;
      color: #303133;
      width: 225px;
      height: 80px;
      padding: 10px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      font-size: 13px;
    }

    .no {
      position: absolute;
      left: 5px;
      top: 5px;
      width: 40px;
      height: 40px;
      background-color: deeppink;
      font-size: 22px;
      border-radius: 50%;
      text-align: center;
      line-height: 40px;
    }

    [v-cloak] {
      display: none;
    }
  </style>

</head>

<body>
  <div id="app" v-cloak>
    <div id="map1">
      <div class="map"></div>
      <button @click='drawCircle1' type="button">绘制圆</button>
      <div class="no">1</div>
      <div class="text" v-show='map1.radius > 0'>
        通过外切正方形和ol.sphere.getDistance计算圆的实际半径是{{map1.radius.toFixed(2)}}米
      </div>
    </div>
    <div id="map2">
      <div class="map"></div>
      <button @click='drawCircle2' type="button">绘制圆</button>
      <div class="no">2</div>
      <div class="text" v-show='map2.radius > 0'>
        通过外切正方形和ol.sphere.getDistance计算圆的实际半径是{{map2.radius.toFixed(2)}}米
      </div>
    </div>
    <div id="map3">
      <div class="map"></div>
      <button @click='drawCircle3' type="button">绘制圆</button>
      <div class="no">3</div>
      <div class="text" v-show='map3.radius > 0'>
        通过外切正方形和ol.sphere.getDistance计算圆的实际半径是{{map3.radius.toFixed(2)}}米
      </div>
    </div>
    <div id="map4">
      <div class="map"></div>
      <button @click='drawCircle4' type="button">绘制圆</button>
      <div class="no">4</div>
      <div class="text" v-show='map4.radius > 0'>
        通过外切正方形和ol.sphere.getDistance计算圆的实际半径是{{map4.radius.toFixed(2)}}米
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/9.2.4/dist/ol.min.js"
    integrity="sha512-xXS2hdEzrUC2BFO0fIJ+d/bwScOLgN+W7psE4XXq6xULXjKFCskUNe8QOVVUsB7vtYRI5ZS0Ie4EgS4VzJQBkQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.14/vue.global.prod.min.js"
    integrity="sha512-huEQFMCpBzGkSDSPVAeQFMfvWuQJWs09DslYxQ1xHeaCGQlBiky9KKZuXX7zfb0ytmgvfpTIKKAmlCZT94TAlQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  
  <script>
    const attributions = '<a href="https://ditu.amap.com/" target="_blank">&copy; 地图版权归高德地图所有</a>';
    const opt = {
      attribution: true, // 地图版权信息工具
      attributionOptions: {
        collapsed: false, // 默认折叠
        collapsible: false // 是否可折叠，显示折叠按钮
      }
    };
    const controls1 = ol.control.defaults.defaults(opt);
    const controls2 = ol.control.defaults.defaults(opt);
    const controls3 = ol.control.defaults.defaults(opt);
    const controls4 = ol.control.defaults.defaults(opt);
    const { createApp } = Vue;
    const points = [
      [106.03856529698734, 36.715601452531985],
      [106.04511871358466, 36.715249157323015],
      [106.0441664739892, 36.70309480469023],
      [106.05334789377213, 36.71736392034397],
      [106.04823045590192, 36.71700300656149],
      [106.03627851728827, 36.71912529157915],
      [106.05360531616198, 36.71198113636472],
      [106.05428014137092, 36.70364632178643],
      [106.05272219344934, 36.70405878147777],
      [106.04031644749523, 36.70131469639507],
      [106.04992475700587, 36.704465013438984],
      [106.0362851004705, 36.71631725725335],
      [106.04396444398678, 36.70170854267481],
      [106.03967129518713, 36.70465966283948],
      [106.04947973195947, 36.701027023961714],
      [106.05009739335343, 36.70103654486449],
      [106.04874323314455, 36.719335085953205],
      [106.03881457149267, 36.71469589863913],
      [106.04058181311, 36.717262154552685],
      [106.04119879278763, 36.719316603943696],
      [106.03312059096076, 36.701078249021116],
      [106.05204167785408, 36.70374086782358],
      [106.04870676748037, 36.70673950708234],
      [106.04015754145077, 36.71136658608413],
      [106.04881304819146, 36.71524252121091],
      [106.04589747892628, 36.71780435952241],
      [106.03434325338866, 36.71512495802869],
      [106.03603721844492, 36.70043548429202],
      [106.05045407137399, 36.710360982261406],
      [106.05160293938468, 36.71942325734422],
      [106.03969629297869, 36.7007645924199],
      [106.03586403120973, 36.717155982993525],
      [106.05337985500408, 36.70532711839829],
      [106.05599125714248, 36.71901791698683],
      [106.04675383821021, 36.71482007750959],
      [106.03565090215798, 36.71469680322872],
      [106.04896501175787, 36.71522708924307],
      [106.05514087275122, 36.715668531817215],
      [106.03677123895822, 36.70575434597479],
      [106.03527682817865, 36.71762155005134],
      [106.04671251850077, 36.708161558697505],
      [106.04166918273323, 36.718122766010765],
      [106.05686689596588, 36.71394013441751],
      [106.03510618101379, 36.705853577302385],
      [106.04987963777226, 36.71386476864049],
      [106.0437309103353, 36.71220071146156],
      [106.04388189720399, 36.71861748064869],
      [106.04747078253119, 36.71102457046147],
      [106.05245261048138, 36.71612487521888],
      [106.03906672145371, 36.71052904513593],
      [106.04770239170306, 36.71315125362329],
      [106.03835651355784, 36.707662446481805],
      [106.05179120177168, 36.71061592502026],
      [106.05631990450053, 36.709793483982914],
      [106.05505846219096, 36.7174717150576],
      [106.04948935552717, 36.70733869708594],
      [106.04913128708446, 36.71028657292116],
      [106.04082586277384, 36.70689167033498],
      [106.03878921926291, 36.712295856026316],
      [106.05597166455875, 36.718934346109855],
      [106.04458594406023, 36.712325321362606],
      [106.04553023288403, 36.718573076115305],
      [106.0377139625627, 36.70295490849309],
      [106.04507362315279, 36.701823477487295],
      [106.055910473036, 36.705235302254756],
      [106.03304137950572, 36.70596343837254],
      [106.04530861573848, 36.704210753641526],
      [106.04818217445073, 36.71724676661675],
      [106.04524631796305, 36.71345092172417],
      [106.05197425082197, 36.70876385934474],
      [106.05133232074328, 36.71253001408609],
      [106.05643889483093, 36.70245359947348],
      [106.05138093624726, 36.708667227263646],
      [106.05492091952475, 36.70522334930395],
      [106.04021222576561, 36.71303203877023],
      [106.04646254141682, 36.71066997999058],
      [106.05688047872697, 36.70340829434909],
      [106.04679357921378, 36.70350713868674],
      [106.04615639552989, 36.715637849843354],
      [106.04932134645253, 36.70916228366454],
      [106.04116669506682, 36.70695548745731],
      [106.05582832600577, 36.71656187147019],
      [106.03622355969662, 36.70204903093024],
      [106.03857970493063, 36.709859467933775],
      [106.03789778267465, 36.719485447001446],
      [106.04378213238229, 36.71270104328229],
      [106.05406414843756, 36.70477052639887],
      [106.05088835231388, 36.71592477339423],
      [106.03287966476613, 36.70070398927898],
      [106.04875533711666, 36.7087945623416],
      [106.05383547728064, 36.70817889692501],
      [106.04477844325737, 36.71036975386329],
      [106.05126518373585, 36.703257320496576],
      [106.04034907247515, 36.71372075225273],
      [106.053697991376, 36.70691196769714],
      [106.04650440971503, 36.70536709225446],
      [106.04868999368568, 36.71087850589237],
      [106.04894327456397, 36.7011707708129],
      [106.0394126654202, 36.71635780232134],
      [106.0388381325141, 36.716585730506516],
      [106.0326448555328, 36.702610527189165],
      [106.04201897570853, 36.718077319886376],
      [106.0378001062355, 36.717158370716554],
      [106.04888133264807, 36.70200187799761],
      [106.04021804839164, 36.700540435616126],
      [106.03784170223852, 36.71327590603148],
      [106.05393633775599, 36.701378827646224],
      [106.04451593745588, 36.70258972594541],
      [106.04939628338197, 36.71132554060028],
      [106.04103796987322, 36.71781284710831],
      [106.05177065376328, 36.71906135452441],
      [106.04921013441802, 36.70394190294814],
      [106.0403178873249, 36.711696186898735],
      [106.03407637806852, 36.71562338269049],
      [106.05644150310924, 36.71758133757321],
      [106.05683737377416, 36.713101267097414],
      [106.05534798197625, 36.70922744499401],
      [106.0357939454618, 36.70471399438291],
      [106.05433154590376, 36.70290803026316],
      [106.03264085328779, 36.714549813420675],
      [106.04428732464854, 36.70820716843422],
      [106.05469080591362, 36.716377184570185],
      [106.04780035322352, 36.7040761232565],
      [106.04548038423829, 36.709776264730806],
      [106.05119827677512, 36.70817721466057],
      [106.05290523857231, 36.712519436472185],
      [106.0504020471747, 36.70039422022602],
      [106.04620637835825, 36.7173258855394],
      [106.05227834599178, 36.70458765214443],
      [106.03825798206574, 36.70722796140763],
      [106.05217242677695, 36.70772520894793],
      [106.03380008375886, 36.70294806341726],
      [106.0518410377322, 36.70354835106634],
      [106.033890176223, 36.71189378230229],
      [106.04639018191502, 36.71205887554912],
      [106.03775394951647, 36.70446218961782],
      [106.0487829996151, 36.70649306362228],
      [106.04003456058831, 36.70209972419181],
      [106.05039205184828, 36.713702030164434],
      [106.04911798300643, 36.700665812564765],
      [106.04310673452018, 36.71826056574923],
      [106.04533512785106, 36.70489164269526],
      [106.04601777224514, 36.71085347625881],
      [106.04614716311029, 36.708608749380566],
      [106.04628691786874, 36.703539900728614],
      [106.05286500650338, 36.707216529886914],
      [106.05183506333333, 36.69995690172742],
      [106.04675392818517, 36.70604546151936],
      [106.04576551604372, 36.71541249703902],
      [106.04438841236691, 36.70122891745222],
      [106.04232133868294, 36.71278495342945],
      [106.050502151664, 36.709216657364706],
      [106.04572508426592, 36.71375157340604],
      [106.03479197187006, 36.71169673905095],
      [106.0554333966306, 36.710725503536956],
      [106.03966051160171, 36.718046132028434],
      [106.05456768673989, 36.702155441652366],
      [106.03707017826035, 36.70527654128902],
      [106.03947902773584, 36.71350623566335],
      [106.04043697680892, 36.710805824387144],
      [106.04904035599918, 36.71333631650749],
      [106.04733798431874, 36.710704170698676],
      [106.05296019785051, 36.70783313840637],
      [106.0391263591018, 36.707461325955215],
      [106.05325279662762, 36.70536322216468],
      [106.0506900602622, 36.705920294077174],
      [106.03833260407428, 36.70313549234984],
      [106.0355718325746, 36.70095966465655],
      [106.03737877849426, 36.700006600639966],
      [106.04987463584925, 36.702938236981765],
      [106.0416836880834, 36.71976144285817],
      [106.03239951008095, 36.70385559818152],
      [106.04987359225544, 36.7048785013871],
      [106.04284993637684, 36.71304289422518],
      [106.05315320131669, 36.70013062762211],
      [106.04636803132085, 36.70140687433069],
      [106.03222326157571, 36.7164493838061],
      [106.05529200080794, 36.7029578705509],
      [106.04593000325151, 36.70239718695554],
      [106.05072083163437, 36.706991719399525],
      [106.04640673049332, 36.70964026865297],
      [106.03855990160424, 36.70540768761446],
      [106.05332296126807, 36.70160185637431],
      [106.0466812758447, 36.71985433012892],
      [106.05340274994487, 36.71490014557847],
      [106.03383512464055, 36.71786203096421],
      [106.03390133804677, 36.71200045570234],
      [106.04932079848855, 36.70115984183022],
      [106.04783041940833, 36.709823937702375],
      [106.05678771546434, 36.70549771686619],
      [106.03822944714464, 36.71063563192302],
      [106.03461814019026, 36.702663860491086],
      [106.05638072919696, 36.701745969556136],
      [106.0557453493057, 36.70676485391145],
      [106.03616985546736, 36.716395082863656],
      [106.03767891436716, 36.716791922477555],
      [106.04549999280567, 36.70381460640143],
      [106.05433773130724, 36.708383990284034],
      [106.045837908683, 36.71340038892937],
      [106.03272402745576, 36.69995799280429],
      [106.04587463242001, 36.71535230550449],
      [106.0557474779694, 36.70528718715958],
      [106.04447641040765, 36.71419615423086],
      [106.04810714060854, 36.712995577010325],
      [106.03684734490014, 36.70634076517822],
      [106.03863406228542, 36.70766656378712],
      [106.04816729975687, 36.71686251319633],
      [106.04448795390216, 36.71214238711057],
      [106.03480072117743, 36.70374993822852],
      [106.04407178124542, 36.716899495000135],
      [106.05532557902093, 36.71632472042606],
      [106.05507706902513, 36.71279191815255],
      [106.04417594278276, 36.70525482292016],
      [106.04930651529567, 36.71527476742723],
      [106.05187862568722, 36.7140425950128],
      [106.04047262041387, 36.70299286776074],
      [106.05431935556251, 36.70720669360498],
      [106.04457033469778, 36.70054935324986],
      [106.04303126730774, 36.719559601533696],
      [106.05569969919843, 36.70251762453498],
      [106.04831903707762, 36.70367855404402],
      [106.03381762680844, 36.70394286642498],
      [106.05527763278069, 36.70358945310848],
      [106.03542558865388, 36.70667530355766],
      [106.03694671947558, 36.70311918704647],
      [106.04044424613987, 36.70556714660077],
      [106.03467597729748, 36.718709456475075],
      [106.03398256001896, 36.718224102940205],
      [106.04668524712888, 36.71211523043252],
      [106.04551157664821, 36.719403129398486],
      [106.03779648679831, 36.71406555335596],
      [106.03616053115213, 36.704877663042886],
      [106.03808087838968, 36.70824217583612],
      [106.05602736857116, 36.71085103668903],
      [106.0485743664788, 36.71872452537744],
      [106.0345013412136, 36.70621265352114],
      [106.04194771643465, 36.70097355869823],
      [106.0380406636863, 36.70326342362782],
      [106.05470356468179, 36.70150431181921],
      [106.05154927580638, 36.70388325632227],
      [106.03213826105276, 36.70066568242373],
      [106.04707022733638, 36.71229443195848],
      [106.04185773685298, 36.70747652186279],
      [106.04315171328125, 36.70900700766254],
      [106.04892832052079, 36.719779538379875],
      [106.03568689238371, 36.70553899199747],
      [106.04838588099524, 36.713752885006286],
      [106.04711086938697, 36.71277596929717],
      [106.05550266903327, 36.719089041840945],
      [106.04337826204709, 36.71819988828975],
      [106.04569853740217, 36.70549390390651],
      [106.03728096061772, 36.703264360106566],
      [106.03914262699271, 36.70184285196452],
      [106.04097821448354, 36.70842703479423],
      [106.03583469129666, 36.70333173298524],
      [106.04535387203276, 36.70708978562918],
      [106.04223924510708, 36.7134509292004],
      [106.05145917480039, 36.719403935468044],
      [106.04044938279979, 36.71810882814595],
      [106.0553455225815, 36.71949355029116],
      [106.04314755523593, 36.71645122305788],
      [106.04481036578464, 36.71885508326397],
      [106.05565599762916, 36.71874865147025],
      [106.05389516820489, 36.71289215641193],
      [106.03304167486988, 36.716813858042926],
      [106.0409460962699, 36.70219734005007],
      [106.04124507036776, 36.70248301066145],
      [106.04688510709857, 36.70271494472224],
      [106.0449768279204, 36.717040399641554],
      [106.05387632457463, 36.718269503142515],
      [106.05120699887344, 36.70984564045039],
      [106.04496249189789, 36.70321863863696],
      [106.03896504917707, 36.70419546319513],
      [106.04320647626743, 36.70306118164444],
      [106.04137045661689, 36.71019131343606],
      [106.05191973143974, 36.71068311003903],
      [106.05430272252461, 36.70075443784451],
      [106.03447204582379, 36.70052254899382],
      [106.0468355859208, 36.708394693663664],
      [106.05617645721657, 36.716272887953245],
      [106.04944706451056, 36.70461379059886],
      [106.04045229847124, 36.70073377644245],
      [106.05116040683545, 36.71052790723829],
      [106.05615470222952, 36.71123339245161],
      [106.04003861226059, 36.702555065412184],
      [106.04891944112643, 36.71490037368554],
      [106.04965603345349, 36.700760813901475],
      [106.0358665234692, 36.715695274273386],
      [106.03774219896556, 36.70506106407363],
      [106.0524323097498, 36.70056077167771],
      [106.05035219600221, 36.711291243033585],
      [106.04894433456562, 36.70100562776742],
      [106.03462832374007, 36.70950550944486],
      [106.05681465080569, 36.70957628850537],
      [106.05564186457724, 36.708083463811164],
      [106.03711288965172, 36.70025229922964],
      [106.04029187732093, 36.70113567426903],
      [106.0503300514655, 36.711929477579325],
      [106.05169202268291, 36.707030798025464],
      [106.03282607786207, 36.711643420465776],
      [106.04471033755955, 36.70547049444256],
      [106.03260043460058, 36.71637755917025],
      [106.03761757632347, 36.71740216295046],
      [106.04847316530716, 36.719385977044595],
      [106.04449218437765, 36.719181188059025],
      [106.05076099246332, 36.70311856637862],
      [106.04830551231728, 36.70587082061162],
      [106.05534302194665, 36.70541445870636],
      [106.05382604585122, 36.714389841044564],
      [106.04271260030971, 36.71616260141933],
      [106.0444473672652, 36.717790677194195],
      [106.04621899530942, 36.701668896607856],
      [106.05426167611076, 36.71547373741108],
      [106.04876748388521, 36.70217670408399],
      [106.03704079985748, 36.70076831071585],
      [106.03709049506224, 36.7035296010181],
      [106.05485737116972, 36.70473447848138],
      [106.04563751763521, 36.70216531719663],
      [106.03286585839643, 36.70475513338537],
      [106.04496365116194, 36.71041003090177],
      [106.04575850704198, 36.7134273444236],
      [106.04774475622483, 36.70951744712853],
      [106.04730844967102, 36.71029452079092],
      [106.04070505769285, 36.71291339683349],
      [106.03426515345926, 36.71154806489388],
      [106.05458716874529, 36.70887443891013],
      [106.05299157125887, 36.7034236603848],
      [106.0492116091035, 36.70634811666345],
      [106.04779355115062, 36.71555301725728],
      [106.0358426214764, 36.71266104446128],
      [106.05071214140189, 36.71213907946835],
      [106.05452587564318, 36.703035987091496],
      [106.04691920942791, 36.71113831137103],
      [106.054101183946, 36.7072236383197],
      [106.03290103459432, 36.71352192273852],
      [106.05349157216071, 36.71659247637842],
      [106.05464742827013, 36.716695523304814],
      [106.04176786545918, 36.718381216509606],
      [106.0434851534801, 36.708744703193425],
      [106.03280578860841, 36.71187955274604],
      [106.05621330962762, 36.71632533428255],
      [106.03216939451838, 36.70297378682236],
      [106.03330944124103, 36.70582228978953],
      [106.0360416439692, 36.70558043432113],
      [106.03939556154845, 36.70523021802937],
      [106.03577381544757, 36.70925729812435],
      [106.03561724584505, 36.71528141091663],
      [106.0451311366277, 36.71579605390048],
      [106.05156625872931, 36.70828804935262],
      [106.04070706101032, 36.70628475919599],
      [106.04194889168618, 36.71433701430015],
      [106.0525208085825, 36.71480627492417],
      [106.0452582678306, 36.7074783774109],
      [106.03289515322506, 36.70802695801666],
      [106.03799044143197, 36.71784851708591],
      [106.03390319172952, 36.701566305149555],
      [106.04183945777444, 36.71537415600202],
      [106.0447963558994, 36.706974557275345],
      [106.04032050367881, 36.70112888580936],
      [106.04764850478733, 36.703566850258824],
      [106.04540367042308, 36.71668205659898],
      [106.04935925305546, 36.71014368406572],
      [106.05141487596453, 36.71307490903447],
      [106.03379649025938, 36.71005442589269],
      [106.04982755245594, 36.70597826650642],
      [106.0559137246373, 36.70326779802888],
      [106.05598394739748, 36.71029440571298],
      [106.04051637300584, 36.706046204747686],
      [106.03334897626561, 36.71714118549034],
      [106.0483331047027, 36.7133279405543],
      [106.05625166283839, 36.7151401020501],
      [106.03908226393187, 36.71353046966022],
      [106.03204632348513, 36.704959476384026],
      [106.04004555365728, 36.71182792622598],
      [106.04413869185454, 36.716371543214805],
      [106.03803755440441, 36.71792929596167],
      [106.04155380768336, 36.70384909312614],
      [106.04733291007393, 36.71557440664517],
      [106.0368392221992, 36.716208053130245],
      [106.0376311214515, 36.718276209445996],
      [106.0502353426452, 36.71603257104893],
      [106.04198653560763, 36.71416216196465],
      [106.05365850887728, 36.703179804727995],
      [106.0335108099139, 36.71336091891637],
      [106.05546475962966, 36.71778824689305],
      [106.04931564677848, 36.711743006798294],
      [106.0501829693853, 36.7082338088767],
      [106.03703319901514, 36.71718748244755],
      [106.04703650620726, 36.700701532490264],
      [106.05015363441433, 36.70200294835435],
      [106.0536002688133, 36.716507973853304],
      [106.05403787168486, 36.70333545045256],
      [106.055748560005, 36.70836650611977],
      [106.03364962987283, 36.71070330842656],
      [106.05264999723273, 36.70271761948378],
      [106.04678757968013, 36.70549302535579],
      [106.04261613860061, 36.706574223031154],
      [106.04450856912118, 36.70340150619908],
      [106.04807717868269, 36.71857319503142],
      [106.05064891627359, 36.70027703990959],
      [106.03270791070948, 36.704892949344035],
      [106.03221664922037, 36.715716235092295],
      [106.03599813947318, 36.7031368792047],
      [106.04276425120963, 36.70117328686747],
      [106.0473037985282, 36.70405212779703],
      [106.03810220835216, 36.702867519579456],
      [106.0483290137876, 36.71671822232172],
      [106.04904719315728, 36.711206496719974],
      [106.04753011288827, 36.71251543642333],
      [106.04905583372617, 36.70020584793258],
      [106.05224310052633, 36.70110336106104],
      [106.04947680488715, 36.71798527321728],
      [106.03830208565758, 36.714630000842206],
      [106.0325071220447, 36.71518002823173],
      [106.03999568460011, 36.70650950533316],
      [106.04403241767253, 36.700288334710926],
      [106.04926477743953, 36.71492156079252],
      [106.05139136586614, 36.70487400314485],
      [106.03481269980115, 36.70901647759997],
      [106.03394831294484, 36.71175310110714],
      [106.05248216101539, 36.718571982208644],
      [106.05359101692488, 36.71479285070182],
      [106.051980633667, 36.70483828285411],
      [106.05464032305628, 36.70479723151598],
      [106.04148059975869, 36.712495647107325],
      [106.04810110051436, 36.71796515883503],
      [106.03507030268236, 36.71553986578019],
      [106.04258501488121, 36.70556956669319],
      [106.04726097931741, 36.700995609965126],
      [106.04904012773262, 36.71045371167133],
      [106.04574541145624, 36.709079263857],
      [106.03706525135219, 36.71599330507114],
      [106.03468264276357, 36.709695269629],
      [106.03400927300177, 36.718212868399014],
      [106.04866441053859, 36.71624791925375],
      [106.0430022011958, 36.70140537121249],
      [106.04551948586212, 36.70078199377391],
      [106.03833316220913, 36.70252854638897],
      [106.04547320281306, 36.71945889312365],
      [106.04954978424122, 36.70726341987572],
      [106.04109970713621, 36.71643155689624],
      [106.03634515899242, 36.715743501780544],
      [106.05520257477436, 36.70627528436206],
      [106.0334791849541, 36.71204111906343],
      [106.03642755366457, 36.718822131694594],
      [106.05570540920304, 36.71739174700097],
      [106.05497917607805, 36.707227458855556],
      [106.03432145841626, 36.71351626285991],
      [106.03537679206863, 36.70326066144831],
      [106.05245174330476, 36.71133890442973],
      [106.03410744411066, 36.7111663472046],
      [106.04131772047506, 36.71741185159578],
      [106.03683030450382, 36.71131625899536],
      [106.04578179234655, 36.70064281321336],
      [106.05290198971426, 36.71742527212465],
      [106.04278604129415, 36.71139616913906],
      [106.04950822351584, 36.71084541452434],
      [106.03915575153927, 36.70928046913254],
      [106.05175594452174, 36.69987503925852],
      [106.0492571667899, 36.703980740219826],
      [106.03877990359152, 36.715453434198096],
      [106.04210436097638, 36.71793215607503],
      [106.0450396630497, 36.71488787325943],
      [106.0362129377385, 36.70869032059021],
      [106.03616241613977, 36.704520030911226],
      [106.036661948216, 36.71666549749765],
      [106.0329563273556, 36.7057664993579],
      [106.05175848979977, 36.717470427670754],
      [106.05160619807715, 36.71821257348684],
      [106.04985305983249, 36.70981592918541],
      [106.03717425500905, 36.70395989504171],
      [106.0431519223249, 36.70969982963854],
      [106.04791933202296, 36.71166776985325],
      [106.04537992214972, 36.703042468910475],
      [106.03838271793984, 36.70969081491188],
      [106.05150120069915, 36.70479171925673],
      [106.03964719607897, 36.708501806202065],
      [106.04988172882067, 36.70238413561519],
      [106.0515486626882, 36.719679345986265],
      [106.0555674897898, 36.704266013255825],
      [106.05328606775883, 36.7069827019421],
      [106.04348697993494, 36.71906304950808],
      [106.0566659338933, 36.703587088929815],
      [106.05155902690595, 36.70213212761456],
      [106.05556402574092, 36.70805818768446],
      [106.04093978164462, 36.71224978155864],
      [106.04423836322405, 36.713804700344205],
      [106.05567341653659, 36.70929223671041],
      [106.04311596451332, 36.71665852437281],
      [106.05554487892157, 36.705036419359686],
      [106.03866064193534, 36.71467711999602],
      [106.04996103564122, 36.7111101601153],
      [106.0496870916733, 36.70099960674403],
      [106.03364757016008, 36.71325092085002],
      [106.03564848477943, 36.71123063217433],
      [106.05168459026355, 36.70367452460956],
      [106.03626557305711, 36.71827554297811],
      [106.04458924959508, 36.71161496382338],
      [106.03998119515909, 36.71721163978081],
      [106.0372755957419, 36.70871757428361],
      [106.0350172218906, 36.71777573175365],
      [106.0468968687522, 36.718858317745664],
      [106.03401798990103, 36.71840316096129],
      [106.05035178201196, 36.70838852198183],
      [106.05015846355417, 36.71588497322889],
      [106.03534804178162, 36.71395492206424],
      [106.03291149086361, 36.71353972923258],
      [106.04242574808862, 36.71805946198379],
      [106.04857685280867, 36.710510006810985],
      [106.05040795288119, 36.70455880045482],
      [106.0537428465665, 36.70653594136755],
      [106.05260419457004, 36.71626289476245],
      [106.04631877682618, 36.71804829509059],
      [106.05576379897457, 36.70259282865169],
      [106.04171261840376, 36.714052932880776],
      [106.04921110116398, 36.70850769925966],
      [106.04299107825874, 36.70663292145527],
      [106.04209691348417, 36.71395833875756],
      [106.04039654359438, 36.7005617359808],
      [106.04164288667022, 36.700395795511774],
      [106.04118297177719, 36.71924705829585],
      [106.03672620151532, 36.71631032990466],
      [106.03387707308877, 36.717487780195896],
      [106.0392897842217, 36.71452401819241],
      [106.03614359601163, 36.71323245152329],
      [106.03462292844712, 36.71403587352088],
      [106.04191597714244, 36.713942988276315],
      [106.05429571014103, 36.70330806671734],
      [106.03760562358613, 36.705780374389064],
      [106.0504368833694, 36.70540604388448],
      [106.05265016366403, 36.71137792395548],
      [106.04574429147176, 36.70363717690035],
      [106.04816012248729, 36.71397943103718],
      [106.05035693498421, 36.715794242076534],
      [106.04559268886602, 36.71398018823342],
      [106.04802227995116, 36.71396534337241],
      [106.04217912451941, 36.71496095795798],
      [106.04870991522488, 36.7086808770516],
      [106.03731488879549, 36.7162007598518],
      [106.05086246945935, 36.71719539725983],
      [106.05592257048683, 36.71789346567711],
      [106.03598422842744, 36.712141163237625],
      [106.04294856395072, 36.70887482419375],
      [106.03424210075087, 36.70216268521245],
      [106.03616506969709, 36.718533481738554],
      [106.0344162297561, 36.70893260042332],
      [106.04461980866861, 36.71047871350797],
      [106.05333040130357, 36.71335078544918],
      [106.05668635292338, 36.71837147921423],
      [106.05316597998787, 36.71101682456235],
      [106.04536252848428, 36.71376799752717],
      [106.03545638837527, 36.71683738643369],
      [106.05496287652628, 36.711903234311606],
      [106.0352032482723, 36.70399920927027],
      [106.05149090527806, 36.701268454295715],
      [106.05378038146443, 36.703687560826054],
      [106.04746786310935, 36.7120744348901],
      [106.04799814908839, 36.714896300328384],
      [106.03246974586685, 36.717496315563274],
      [106.04800005975162, 36.701007472136666],
      [106.03255710363348, 36.71013784982679],
      [106.05410423491749, 36.70423749627373],
      [106.0351963727064, 36.714878423534294],
      [106.05124266382217, 36.717697791092824],
      [106.04420248013527, 36.71451424790791],
      [106.0449279394075, 36.71061415553897],
      [106.03308228705512, 36.70518586897944],
      [106.04253959623362, 36.71084501815781],
      [106.05639596927357, 36.712998631562364],
      [106.03343970746432, 36.707920341059776],
      [106.05381818816598, 36.7020736331998],
      [106.0396064440584, 36.71963003062546],
      [106.0464325041783, 36.71430268277222],
      [106.0422377575763, 36.7077254929263],
      [106.05186278111104, 36.71124066630282],
      [106.04978995594801, 36.70896060867328],
      [106.04534540967332, 36.71234291090418],
      [106.0465711670962, 36.71087665577389],
      [106.05028762408061, 36.71169237101467],
      [106.04917061621866, 36.70780568270031],
      [106.03386465913144, 36.70149718153289],
      [106.05031138094164, 36.71186829801462],
      [106.03853587812273, 36.71715039868047],
      [106.04804491283406, 36.69990523806046],
      [106.05010794166067, 36.706924122837016],
      [106.05233542684257, 36.718950993928814],
      [106.03790444019563, 36.7152190689625],
      [106.04165507645716, 36.719550589047685],
      [106.03581948075197, 36.71512528836285],
      [106.05632243145658, 36.71416432566731],
      [106.041038193138, 36.71739590178611],
      [106.04371097217168, 36.71868761277389],
      [106.05442176125383, 36.701819600108145],
      [106.0379648669348, 36.70908788011148],
      [106.03641122700984, 36.71402771461132],
      [106.05657884490662, 36.70842904901045],
      [106.04389854634292, 36.709827804640625],
      [106.0438270194108, 36.71105599428718],
      [106.0457040575846, 36.70404425757913],
      [106.0568274375135, 36.70915911176283]
    ];

    function toRadians(degrees) {
      return degrees * Math.PI / 180;
    }

    function toDegrees(radians) {
      return radians * 180 / Math.PI;
    }

    function calculateDestination(coord1, distance, bearing) {
      const R = 6371000; // 地球半径，单位为米
      const lat1 = toRadians(coord1[1]);
      const lon1 = toRadians(coord1[0]);
      const theta = toRadians(bearing);
      const dR = distance / R;
      const lat2 = Math.asin(Math.sin(lat1) * Math.cos(dR) +
        Math.cos(lat1) * Math.sin(dR) * Math.cos(theta));
      const lon2 = lon1 + Math.atan2(Math.sin(theta) * Math.sin(dR) * Math.cos(lat1),
        Math.cos(dR) - Math.sin(lat1) * Math.sin(lat2));
      return [toDegrees(lon2), toDegrees(lat2)];
    }
    const center4326 = [106.04453415000009, 36.70986324334069];
    const center3857 = ol.proj.transform(center4326, 'EPSG:4326', 'EPSG:3857');
    const radius = 1000;
    const R = 6371000; // 地球半径
    const circleStyle = new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#20b1aa',
        width: 4
      }),
      zIndex: 2
    })
    const vm = createApp({
      data() {
        return {
          map1: {
            map: {},
            radius: 0,
            layer: {}
          },
          map2: {
            map: {},
            radius: 0,
            layer: {}
          },
          map3: {
            map: {},
            radius: 0,
            layer: {}
          },
          map4: {
            map: {},
            radius: 0,
            layer: {}
          }
        }
      },
      methods: {
        // 初始化地图
        initMap() {
          // 高德地图瓦片地址
          const source = new ol.source.XYZ({
            url: 'http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
            attributions: attributions
          });
          const viewOpt = {
            center: center3857,
            zoom: 14
          };
          this.map1.map = new ol.Map({
            target: document.querySelector('#map1 .map'),
            layers: [new ol.layer.Tile({
              source
            })],
            controls: controls1,
            view: new ol.View({
              ...viewOpt
            })
          });
          this.map2.map = new ol.Map({
            target: document.querySelector('#map2 .map'),
            layers: [new ol.layer.Tile({
              source
            })],
            controls: controls2,
            view: new ol.View({
              ...viewOpt
            })
          });
          this.map3.map = new ol.Map({
            target: document.querySelector('#map3 .map'),
            layers: [new ol.layer.Tile({
              source
            })],
            controls: controls3,
            view: new ol.View({
              ...viewOpt
            })
          });
          this.map4.map = new ol.Map({
            target: document.querySelector('#map4 .map'),
            layers: [new ol.layer.Tile({
              source
            })],
            controls: controls4,
            view: new ol.View({
              ...viewOpt
            })
          });
          // // 渲染点位
          this.renderPoints(1);
          this.renderPoints(2);
          this.renderPoints(3);
          this.renderPoints(4);
        },
        // 使用ol.geom.Circle直接绘制半径为1000米的圆
        drawCircle1() {
          const geom = new ol.geom.Circle(center3857, radius);
          const feature = new ol.Feature(geom);
          feature.setStyle(circleStyle);
          this.map1.layer.getSource().addFeature(feature);
          // 绘制辅助正方形，验证圆的半径
          this.drawRect(feature.getGeometry(), this.map1);
          console.log('通过ol.geom.Circle方法，以1000为半径绘制的圆，使用外切正方形计算的半径是', this.map1.radius);
          // 圆上的点到圆心的距离验证圆的实际半径
          const pointOnCircle = [center3857[0], center3857[1] + radius];
          const pointOnCircle4326 = ol.proj.transform(pointOnCircle, 'EPSG:3857', 'EPSG:4326')
          this.drawPoint(pointOnCircle4326, this.map1.layer);
          const distanceRadius = ol.sphere.getDistance(pointOnCircle4326, center4326);
          console.log('通过ol.geom.Circle方法，以1000为半径绘制的圆，使用圆上的一点，通过ol.sphere.getDistance计算点到圆心的距离', distanceRadius);
          // 圆上的点到圆心的距离验证圆的实际半径
          const lastCoord = geom.getLastCoordinate();
          const lastCoord4326 = ol.proj.transform(lastCoord, 'EPSG:3857', 'EPSG:4326')
          this.drawPoint(lastCoord4326, this.map1.layer, 'black');
          const distanceRadius1 = ol.sphere.getDistance(lastCoord4326, center4326);
          console.log('通过ol.geom.Circle方法，以1000为半径绘制的圆，使用圆上的一点，通过ol.sphere.getDistance计算点到圆心的距离', distanceRadius1);
          // 用ol.sphere.getDistance计算点位距离圆心的距离是否在1000米之内，在的，变为红色
          this.calcDistanceAndSetStyle(this.map1);
        },
        // 以圆心为基准，经度方向和纬度方向上，计算出距离这个圆心1000米的点位的经纬度，
        // 再计算两个点位距离圆心的平面距离，以两个距离中较大的作为圆心，绘制圆
        drawCircle2() {
          // 计算出经度方向上距离圆心1000米的点的坐标
          const lat1 = center4326[1] + (radius / R) * (180 / Math.PI);
          const top4236 = [center4326[0], lat1];
          const top3857 = ol.proj.transform(top4236, 'EPSG:4326', 'EPSG:3857');
          this.drawPoint(top4236, this.map2.layer);
          const topDistance = ol.sphere.getDistance(center4326, top4236);
          console.log('计算出来的经度方向的点', top4236)
          console.log('通过ol.sphere.getDistance验证计算出来的经度方向的点和中心点的实际距离', topDistance);
          // 计算出纬度方向上距离圆心1000米的点的坐标
          const lon1 = center4326[0] + (1000 / (R * Math.cos(Math.PI * center4326[1] / 180))) * (180 / Math.PI);
          const right4236 = [lon1, center4326[1]];
          const right3857 = ol.proj.transform(right4236, 'EPSG:4326', 'EPSG:3857');
          this.drawPoint(right4236, this.map2.layer);
          const rightDistance = ol.sphere.getDistance(center4326, right4236);
          console.log('计算出来的纬度方向的点', right4236);
          console.log('通过ol.sphere.getDistance验证计算出来的纬度方向的点和中心点的实际距离', rightDistance);
          // 计算经度方向上的点和圆心的平面距离
          const dx = top3857[0] - center3857[0];
          const dy = top3857[1] - center3857[1];
          const verticalDistance = Math.sqrt(dx * dx + dy * dy);
          console.log('垂直方向上平面距离', verticalDistance);
          // 计算纬度方向上的点和圆心的平面距离
          const dxR = right3857[0] - center3857[0];
          const dyR = right3857[1] - center3857[1];
          const horizontalDistance = Math.sqrt(dxR * dxR + dyR * dyR);
          console.log('水平方向上平面距离', horizontalDistance);
          // 两个距离选择最大的作为圆的半径
          const bigRadius = Math.max(verticalDistance, horizontalDistance);
          console.log(`以 ${bigRadius} 为半径绘制圆，此圆的平面半径是${bigRadius}，在地球的椭圆上的半径是${radius}`);
          const feature = new ol.Feature(new ol.geom.Circle(center3857, bigRadius));
          feature.setStyle(circleStyle);
          this.map2.layer.getSource().addFeature(feature);
          // 用ol.sphere.getDistance计算点位距离圆心的距离是否在1000米之内，在的，变为红色
          this.calcDistanceAndSetStyle(this.map2);
          // 绘制圆的外切正方形，通过正方形变长验证绘制的圆的半径
          this.drawRect(feature.getGeometry(), this.map2);
          console.log('通过ol.geom.Circle方法，以' + bigRadius + '为半径绘制的圆，使用外切正方形计算的半径是', this.map2.radius);
          // 通过圆上的一点，ol.sphere.getDistance计算点到圆心的距离
          const pointOnCircle = [center3857[0] - bigRadius, center3857[1]];
          const distanceRadius = ol.sphere.getDistance(ol.proj.transform(pointOnCircle, 'EPSG:3857', 'EPSG:4326'), center4326);
          console.log('通过ol.geom.Circle方法，以' + bigRadius + '为半径绘制的圆，使用圆上的一点，通过ol.sphere.getDistance计算点到圆心的距离', distanceRadius);
        },
        // 通过ol.geom.Polygon.circular绘制
        drawCircle3() {
          const geom4326 = ol.geom.Polygon.circular(center4326, 1000, 64, 6371000);
          const geom3857 = geom4326.clone().transform('EPSG:4326', 'EPSG:3857');
          const feature = new ol.Feature(geom3857);
          feature.setStyle(circleStyle);
          this.map3.layer.getSource().addFeature(feature);
          // 绘制辅助正方形，验证圆的直径
          this.drawRect(feature.getGeometry(), this.map3);
          this.calcDistanceAndSetStyle(this.map3);
          console.log('通过ol.geom.Polygon.circular方法，以1000为半径绘制的近似圆，使用外切正方形计算的半径是', this.map3.radius);
          // 通过圆上的一点，ol.sphere.getDistance计算点到圆心的距离
          const pointOnCircle = [geom4326.flatCoordinates[0], geom4326.flatCoordinates[1]];
          this.drawPoint(pointOnCircle, this.map3.layer);
          const distanceRadius = ol.sphere.getDistance(pointOnCircle, center4326);
          console.log('通过ol.geom.Polygon.circular方法，以1000为半径绘制的近似圆，使用圆上的一点，通过ol.sphere.getDistance计算点到圆心的距离', distanceRadius);
        },
        // 与 drawCircle2 思路相同，只不过计算点使用calculateDestination函数
        drawCircle4() {
          const top4236 = calculateDestination(center4326, radius, 0);
          const top3857 = ol.proj.transform(top4236, 'EPSG:4326', 'EPSG:3857');
          this.drawPoint(top4236, this.map4.layer);
          const topDistance = ol.sphere.getDistance(center4326, top4236);
          console.log('计算出来的经度方向的点', top4236);
          console.log('通过ol.sphere.getDistance验证计算出来的经度方向的点和中心点的实际距离', topDistance);
          const right4236 = calculateDestination(center4326, radius, 90);
          const right3857 = ol.proj.transform(right4236, 'EPSG:4326', 'EPSG:3857');
          this.drawPoint(right4236, this.map4.layer);
          const rightDistance = ol.sphere.getDistance(center4326, right4236);
          console.log('计算出来的纬度方向的点', right4236);
          console.log('通过ol.sphere.getDistance验证计算出来的纬度方向的点和中心点的实际距离', rightDistance);
          // 计算经度方向上的点和圆心的平面距离
          const dx = top3857[0] - center3857[0];
          const dy = top3857[1] - center3857[1];
          const verticalDistance = Math.sqrt(dx * dx + dy * dy);
          console.log('垂直方向上平面距离', verticalDistance);
          // 计算纬度方向上的点和圆心的平面距离
          const dxR = right3857[0] - center3857[0];
          const dyR = right3857[1] - center3857[1];
          const horizontalDistance = Math.sqrt(dxR * dxR + dyR * dyR);
          console.log('水平方向上平面距离', horizontalDistance);
          // 两个距离选择最大的作为圆的半径
          const bigRadius = Math.max(verticalDistance, horizontalDistance);
          console.log(`以 ${bigRadius} 为半径绘制圆，此圆的平面半径是${bigRadius}，在地球的椭圆上的半径是${radius}`);
          const feature = new ol.Feature(new ol.geom.Circle(center3857, bigRadius));
          feature.setStyle(circleStyle);
          this.map4.layer.getSource().addFeature(feature);
          // 用ol.sphere.getDistance计算点位距离圆心的距离是否在1000米之内，在的，变为红色
          this.calcDistanceAndSetStyle(this.map4);
          // 绘制圆的外切正方形，通过正方形变长验证绘制的圆的半径
          this.drawRect(feature.getGeometry(), this.map4);
          console.log('通过ol.geom.Circle方法，以' + bigRadius + '为半径绘制的圆，使用外切正方形计算的半径是', this.map4.radius);
          // 通过圆上的一点，ol.sphere.getDistance计算点到圆心的距离
          const pointOnCircle = [center3857[0] - bigRadius, center3857[1]];
          const distanceRadius = ol.sphere.getDistance(ol.proj.transform(pointOnCircle, 'EPSG:3857', 'EPSG:4326'), center4326);
          console.log('通过ol.geom.Circle方法，以' + bigRadius + '为半径绘制的圆，使用圆上的一点，通过ol.sphere.getDistance计算点到圆心的距离', distanceRadius);
        },
        // 绘制辅助的矩形
        drawRect(circleGeom, map) {
          const rect = circleGeom.getExtent();
          const coordinates = [
            [rect[2], rect[3]],
            [rect[2], rect[1]],
            [rect[0], rect[1]],
            [rect[0], rect[3]],
            [rect[2], rect[3]]
          ]
          // 辅助正方形
          const polygon = new ol.geom.Polygon([coordinates]);
          // 创建多边形的样式
          const style = new ol.style.Style({
            fill: new ol.style.Fill({
              color: 'rgba(255 ,255 ,255 , 0.5)'
            }),
            stroke: new ol.style.Stroke({
              color: '#192336',
              width: 2
            })
          });
          const feature = new ol.Feature({
            geometry: polygon
          });
          feature.setStyle(style);
          map.layer.getSource().addFeature(feature);
          const p1 = ol.proj.transform([rect[2], rect[3]], 'EPSG:3857', 'EPSG:4326');
          const p2 = ol.proj.transform([rect[2], rect[1]], 'EPSG:3857', 'EPSG:4326');
          map.radius = (ol.sphere.getDistance(p1, p2) / 2);
        },
        // 计算距离并修改样式
        calcDistanceAndSetStyle(mapN) {
          const goodPoints = [];
          for (let i = 0; i < points.length; i++) {
            const distance = ol.sphere.getDistance(center4326, points[i]);
            if (distance <= 1000) {
              goodPoints.push(String(points[i][0]).replace('.', '_') + '-' + String(points[i][1]).replace('.', '_'))
            }
          }
          const features = mapN.layer.getSource().getFeatures();
          for (let i = 0; i < features.length; i++) {
            const cid = features[i].get('cid');
            if (goodPoints.indexOf(cid) > -1) {
              features[i].setStyle(new ol.style.Style({
                image: new ol.style.Circle({
                  radius: 5,
                  fill: new ol.style.Fill({ color: '#ff0000' })
                })
              }))
            }
          }
        },
        // 渲染经纬度点位
        renderPoints(lid) {
          const vectorSource = new ol.source.Vector({
            features: points.map(e => {
              const feature = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.fromLonLat(e)),
                cid: String(e[0]).replace('.', '_') + '-' + String(e[1]).replace('.', '_')
              });
              feature.setStyle(new ol.style.Style({
                image: new ol.style.Circle({
                  radius: 5,
                  fill: new ol.style.Fill({ color: 'orange' })
                })
              }))
              return feature;
            })
          });
          // 创建图层
          const pointLayer = new ol.layer.Vector({
            source: vectorSource,
            lid: 'pointLayer'
          });
          // 将矢量图层添加到地图上
          this['map' + lid].map.addLayer(pointLayer);
          // 存储图层
          this['map' + lid].layer = pointLayer;
        },
        // 画点
        drawPoint(lonlat, layer, color = 'rgba(7, 193, 93, 0.8)') {
          const point = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat(lonlat)) // 设置点的坐标
          });
          point.setStyle(new ol.style.Style({
            image: new ol.style.Circle({
              radius: 10,
              fill: new ol.style.Fill({ color }),
              stroke: new ol.style.Stroke({
                color,
                width: 2
              })
            })
          }));
          layer.getSource().addFeature(point);
        }
      },
      mounted() {
        this.initMap();
      }
    }).mount('#app');
  </script>
  
</body>

</html>
